<template>
  <baidu-map class="pointMap" @click="showInfo = false" v-show="show" :center="{lng: 111.75049118275203, lat: 27.26450758650167}" :zoom="13">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
    <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_STAR" color="red" @click="pointClick"></bm-point-collection>
    <bm-info-window :position="infoWindowPos" :show="showInfo" @close="handleClose">
      <div style="margin-top: 12px;">物流企业：{{company_name}}</div>
      <div>数量：{{clickedCount}}</div>
    </bm-info-window>
  </baidu-map>
</template>

<script>

	export default {
		name: "pointMap",
		props: {
			show:{
				type: Boolean,
				default: () => false
			},
			points:{
				type:Array,
        default:()=>[
	        // {lng: 111.74210018275203, lat: 27.25230958650167},
	        // {lng: 111.74220018275603, lat: 27.25230958651167},
	        // {lng: 111.74230018277203, lat: 27.25230958652167}
        ]
      }
    },
		data() {
			return {
				pointsData:[],
        infoWindowPos: {},
        showInfo: false,
        clickedCount: 0,
        company_name: '',
        clickInfo: {

        },
			};
		},
		computed: {},
		watch: {
			points: {
				handler(newVal) {
          console.log(newVal,'::::::::::::newVal1111');
        }, deep: true
			}
    },
		components: {},
		methods: {
      handleClose(info){
        console.log(info, ':::::::::::pointClick');
      },
      pointClick(info){
        console.log(info, ':::::::::::pointClick');
        this.clickedCount = info?.point?.sj_count || 0;
        this.company_name = info?.point?.company_name;
        this.infoWindowPos = { lng: info?.point?.lng, lat: info?.point?.lat };
        this.showInfo = !this.showInfo;
      }
    },
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  .pointMap {
    width: 100%;
    height: 100%;
  }
</style>
